<template>
    <uploadimg v-model="imgurl" @images="imagesFun" :fileNumLimit="1" class="wrap" @compress="compress"
               v-loading="loading" element-loading-text="图片压缩中">
        <div class="img" style="max-width: 1000px">
            <i class="el-icon-upload upload"></i>
        </div>
        <div class="img" v-if="images.src" :style="{'background-image': `url(${images.src})`}"
             :class="{'active': images.src}"
             v-loading="uploading"
             element-loading-text="上传图片中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.8)">
            <i class="el-icon-upload upload"></i>
        </div>
    </uploadimg>
</template>
<script>
    import uploadimg from './index.vue'

    export default {
        props: ['value'],
        data() {
            return {
                images: {
                    src: this.value
                },
                loading: false,
                uploading: false
            }
        },
        computed: {
            imgurl: {
                get() {
                    return this.value
                },
                set(v) {
                    this.$emit('input', v[0])
                    this.uploading = false
                }
            }
        },
        methods: {
            imagesFun([{src, file: {name}}]) {
                this.uploading = true
                this.images = {
                    src, name
                }
            },
            compress(v) {
                this.loading = v
            }
        },
        components: {
            uploadimg
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    $img_size: 180px;
    .wrap {
        display: inline-block;
        // width: $img_size * 3;
        text-wrap: none;
    }

    .img {
        display: inline-block;
        position: relative;
        width: $img_size;
        color: #dcdcdc;
        border: 2px dashed;
        background-size: cover;
        background-position: center;
        &:before {
            display: block;
            content: '';
            padding-top: 100%;
        }
        .upload {
            $size: 32px;
            $half: -$size /2;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1em;
            height: 1em;
            font-size: $size;
            margin: $half 0 0 $half;
        }
        &.active {
            border: none;
            .upload {
                display: none;
            }
        }
    }
  .is-error {
    .img {
      border-color: red;
    }
  }
</style>
